@import "index";

//滑动内部盒子，content的宽度的变化引发滑动的效果
.drag-box {
  position: relative;

  .drag-content {
    width: $drag-arrow-width;

    .drag-bg {
      position: relative;

      width: inherit;
      height: $box-height;
      background-color: $success-color;
    }

    .drag-arrow {
      position: absolute;
      right: 0;
      border-radius: inherit;

      width: $drag-arrow-width;
      height: $drag-arrow-height;
      background-color: $primary-color;

      cursor: pointer;

      .icon {
        width: 30px;
        height: $drag-arrow-height;
      }
    }
  }
}

//滑动失败回退的过渡效果
.drag-back {
  transition: all .5s;
}

//滑动失败回退
@keyframes drag-back {
  0% {

  }

  100% {
    width: $drag-arrow-width;
  }
}
